<template>
  <div id="wrap">
    <h1>effectScope改造</h1>
    <p>{{ state }}</p>
    <p class="inner" ref="inner"></p>
  </div>
</template>

<script lang="ts" setup>
import { ref, effectScope, getCurrentScope, onScopeDispose, onMounted } from 'vue';
// 创建响应式变量
const state = ref(0);
// 创建 effectScope 实例
const scope = effectScope();
// 在作用域内运行逻辑
scope.run(() => {
  const interval = setInterval(() => {
    state.value++;
    console.log(state); // 打印计数值
  }, 1000);

  //active:标记作用域是否处于激活状态
  console.log(scope.active);
  // 验证当前是否处于有效作用域
  const scope1 = getCurrentScope();
  console.log(scope1 ? '有效作用域' : '无效作用域');

  // 注册清理回调，当作用域销毁时清除计时器
  onScopeDispose(() => {
    clearInterval(interval); //在作用域销毁时清理定时器
    console.log('作用域销毁，资源注销');
  });
});
setTimeout(() => {
  scope.stop();
}, 5000);
//active:标记作用域是否处于激活状态
console.log(scope.active);

//获取元素
const inner = ref<HTMLElement | null>(null);
onMounted(() => {
  if(inner.value){
    //对元素进行操作
    console.log(inner.value);
    inner.value.innerHTML = `<span>${state.value}</span>`
  }
})
</script>
